import React,{useEffect,useState} from "react"
import {useDispatch, useSelector, useHistory, useLocation} from 'umi'
import styles from "./login.less"
const  LoginPage:React.FC=()=> {

let [user_name, setUserName] = useState('')
  let [user_pwd, setUserPwd] = useState('')

  const dispatch  = useDispatch();
  const history = useHistory();
  let {query: {redirect}} = useLocation() as any;
  const {isLogin} = useSelector(models=>(models as {user:{isLogin:boolean}}).user);
  useEffect(()=>{
      if(isLogin){
        redirect = redirect?decodeURIComponent(redirect): '/';
        history.replace(redirect)
      }
  
  }, [isLogin]);

    //点击事件
    function login(){
        console.log(user_name, user_pwd)
            dispatch({
              type: 'user/login',
              payload: {user_name, user_pwd}
            })
    }
  return (
    <div className={styles.login}>
        <div className={styles.box}>
            <form className={styles.form}>
                <div className={styles.inp}>
                    <input type="text" placeholder='请输入用户名' value={user_name} onChange={el=>setUserName(el.target.value)}/>
                </div>
                <div className={styles.inp}>
                    <input type="text" placeholder='请输入用户密码' value={user_pwd} onChange={el=>setUserPwd(el.target.value)}/>
                </div>
                <div className={styles.checkbox}>
                    <div>
                    <input type="checkbox"/>记住密码  
                    </div>
                   
                    <a href="">忘记密码</a>
                </div>
            </form>
            <div className={styles.btn}>
                <button onClick={login}>登录</button>
            </div>
        </div>
    </div>
  );
}
export default LoginPage